<template>
  <view>
    <qf-image-cropper
      :width="200"
      :height="200"
      :radius="300"
      :src="imgSrc"
      @crop="handleCrop"
    ></qf-image-cropper>
  </view>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';

  const imgSrc = ref('');

  nextTick(() => {
    uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: async (res) => {
        imgSrc.value = res.tempFilePaths[0];
      },
    });
  });

  // 裁剪后
  const handleCrop = async (e: any) => {
    const base64File = e.tempFilePath;
    uni.$emit('updateAvatar', base64File);
    uni.navigateBack();
  };
</script>
